<template>
  <div id="vip-page">
    <div class="title-1">代码的尽头是开源</div>
    <div class="title-2">升级您的VIP以解锁更多功能和覆盖范围</div>
    <div class="title-3">
      购买年费VIP<span class="bold"> 节省20%或者更多 </span>
    </div>

    <div class="switch-month-year">
      <span
        :class="payType == 'month' ? 'pay-active' : ''"
        @click="changePayType('month')"
        >月付</span
      >
      <span
        :class="payType == 'year' ? 'pay-active' : ''"
        @click="changePayType('year')"
        >年付</span
      >
    </div>

    <!-- VIP 会员开始 -->
    <div class="vip-list">
      <div
        class="vip-item"
        :class="v.class"
        v-for="(v, i) of vipItems"
        :key="i"
      >
        <div v-if="v.class == 'plus'" class="header">
          最流行的选择 <i class="el-icon-magic-stick"></i>
        </div>
        <div class="padding" style="padding: 15px 10px; height: 520px">
          <div class="title">{{ v.title }}</div>
          <div style="margin-top:5px;">{{ v.desc }}</div>
          <div class="price" v-if="payType == 'month'">
            <span class="value">RMB {{ v.monthPrice }}</span>
            <span class="time">/月</span>
          </div>
          <div class="price" v-else>
            <span class="value">RMB {{ v.yearPrice }}</span>
            <span class="time">/年</span>
          </div>
          <div :class="v.class + '-pay-btn'">现在加入</div>
          <div class="feature">{{ v.feature }}</div>
         
         
          <div class="feature-item" v-for="(f, j) of v.features" :key="j">
            <i class="el-icon-success"></i>
            <span class="item-desc">{{ f }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- VIP 会员结束 -->

    <div class="contrast" style="width: 80%; margin: 0 auto;">
      <!-- 所有特性对比开始 -->
      <div class="compare-title">所有功能对比</div>
      <div class="desc">不同的会员将让你的身份不一样。</div>
      <div class="compare-vip">
        <div class="item free">
          <div class="title">免费</div>
          <div class="price">
            <span class="value">RMB0</span>
            <span class="unit">/月</span>
          </div>
          <div class="free-btn">从这里开始</div>
        </div>
        <div class="item plus">
          <div class="title">个人</div>
          <div class="price">
            <span class="value">RMB5</span>
            <span class="unit">/月</span>
          </div>
          <div class="plus-btn" @click="upgradeNow">获取Plus</div>
        </div>
        <div class="item compare-pro">
          <div class="title">创作者</div>
          <div class="price">
            <span class="value">RMB10</span>
            <span class="unit">/月</span>
          </div>
          <div class="pro-btn" @click="upgradeNow">获取Pro</div>
        </div>
      </div>
      <!-- 所有特性对比结束 -->

      <!-- 通用开始 -->
      <div class="class-title general">通用</div>
      <div class="class-item baseline">
        <div class="name">查看免费内容</div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
      </div>
      <div class="class-item baseline">
        <div class="name">查看源代码</div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
      </div>
      <div class="class-item baseline">
        <div class="name">视频上传大小限制</div>
        <div class="gou">-</div>
        <div class="gou">-</div>
        <div class="gou">600M</div>
      </div>
      <div class="class-item">
        <div class="name">添加笔记</div>
        <div class="gou">-</div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
      </div>
      
      <!-- 通用结束 -->

      <!-- 收益开始 -->
      <div class="class-title earning">收益</div>
      <div class="class-item baseline">
        <div class="name">创作收益</div>
        <div class="gou">-</div>
        <div class="gou">
          -
        </div>
        <div class="gou">
          <i class="el-icon-success"></i>
        </div>
      </div>
      <!-- 收益结束 -->

      <h1>支持代码开源</h1>
      <p>
        代码开源促进了软件开发的透明度和可追溯性。它使得任何人都可以查看和理解软件的内部工作原理，这有助于建立信任并减少潜在的安全风险。同时，开源项目通常伴随着详细的文档和活跃的社区支持，这使得用户在使用过程中能够更容易地获得帮助和解决问题。
      </p>
      <p>
        开源模式有助于推动技术创新和协作。通过共享源代码，开发者可以相互学习、交流经验，并在全球范围内协作解决问题。这种协作精神不仅加快了软件开发的速度，还提高了软件的质量。此外，开源项目通常遵循开放标准和最佳实践，这有助于推动整个行业的进步。
      </p>

      <div class="upgrade-now-btn" @click="upgradeNow">现在升级</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payType: "month",
      vipItems: [
        {
          class: "free",
          title: "免费",
          desc: "小白的最佳选择",
          monthPrice: 0,
          yearPrice: 0,
          feature: "免费功能",
          features: [
            "查看免费视频",
            "浏览网站免费内容",
            "查看源代码",
          ],
        },
        {
          class: "plus",
          title: "个人VIP",
          desc: "个人学习最佳选择",
          monthPrice: 5,
          yearPrice: 20,
          feature: "所有免费功能+Plus：",
          features: [
            "个人会员标识",
            "购买付费视频",
            "创建笔记",
          ],
        },
        {
          class: "pro",
          title: "创作者",
          desc: "创作者的天堂",
          monthPrice: 10,
          yearPrice: 30,
          feature: "所有Plus功能+Pro：",
          features: ["创作者会员标识","发布创作视频"],
        },
      ],
    };
  },
  methods: {
    upgradeNow: () => {
      var div = document.getElementById("vip-page");
      div.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    changePayType(type) {
      this.payType = type;
    },
  },
};
</script>

<style scoped>
#vip-page {
  height: 100vh;
  overflow: scroll;
  overflow: auto;
  scrollbar-width: thin;
  /* 定义滚动条的宽度 */
  scrollbar-color: transparent transparent;
  /* 定义滚动条的颜色 */
}

/* 隐藏滚动条 */
#vip-page::-webkit-scrollbar {
  width: 0px;
  /* 定义滚动条宽度 */
  height: 0px;
  background-color: transparent;
  /* 滚动条背景颜色 */
}

#vip-page::-webkit-scrollbar-thumb {
  background-color: transparent;
  /* 滚动条滑块颜色 */
  border-radius: 4px;
  /* 滚动条滑块圆角 */
}

#vip-page ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.2);
  /* 鼠标悬停时滚动条滑块颜色 */
}

#vip-page .title-1 {
  text-align: center;
  margin-top: 100px;
  font-size: 25px;
  font-weight: 540;
}

#vip-page .title-2 {
  text-align: center;
  margin-top: 30px;
  font-size: 35px;
  font-weight: bolder;
}

#vip-page .title-3 {
  margin-top: 80px;
  text-align: center;
  font-size: 15px;
}

#vip-page .title-3 .bold {
  font-weight: bolder;
}

#vip-page .switch-month-year {
  width: 180px;
  margin: 20px auto;
  border: 1px solid gray;
  border-radius: 20px;
  height: 40px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
}

#vip-page .switch-month-year span {
  width: 85px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

#vip-page .switch-month-year .pay-active {
  background-color: black;
  color: white;
  border-radius: 17px;
}

#vip-page .vip-list {
  width: 60%;
  margin: 150px auto;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  align-items: end;
}

#vip-page .vip-list .plus {
  width: 30%;
  border: 1px solid black;
  border-radius: 10px;
}

#vip-page .vip-list .vip-item .header {
  height: 32px;
  background-color: black;
  color: white;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  border-radius: 10px 10px 0 0;
}

#vip-page .vip-list .free,
.pro {
  width: 30%;
  border: 1px solid rgb(192, 188, 188);
  border-radius: 10px;
}

#vip-page .vip-list .vip-item .title {
  font-size: 27px;
  font-weight: bold;
}

#vip-page .vip-list .vip-item .desc {
  font-size: 16px;
  line-height: 32px;
}

#vip-page .vip-list .vip-item .price {
  margin-top: 20px;
}

#vip-page .vip-list .vip-item .price .value {
  font-size: 27px;
  font-weight: bold;
}

#vip-page .vip-list .vip-item .free-pay-btn {
  width: 80%;
  background-color: gray;
  margin: 30px auto;
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  color: white;
  border: 1px solid gray;
  cursor: pointer;
}

#vip-page .vip-list .vip-item .free-pay-btn:hover {
  color: gray;
  background-color: white;
  border: 1px solid gray;
}

#vip-page .vip-list .vip-item .plus-pay-btn,
.pro-pay-btn {
  width: 80%;
  background-color: black;
  margin: 30px auto;
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  border: 1px solid black;
  cursor: pointer;
}

#vip-page .vip-list .vip-item .plus-pay-btn:hover,
.pro-pay-btn:hover {
  color: black;
  background-color: white;
  border: 1px solid black;
}

#vip-page .vip-list .vip-item .feature {
  font-weight: bold;
  font-size: 16px;
  margin: 20px 0;
}

#vip-page .vip-list .vip-item .feature-item {
  font-size: 16px;
  line-height: 32px;
}

#vip-page .vip-list .vip-item .feature-item .item-desc {
  margin-left: 20px;
}

#vip-page .compare-title {
  text-align: center;
  margin-top: 30px;
  font-size: 35px;
  font-weight: bolder;
}

#vip-page .desc {
  text-align: center;
  font-size: 16px;
  line-height: 64px;
}

#vip-page .compare-vip {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
}

#vip-page .compare-vip .item {
  padding: 15px 10px;
  border: 1px solid gray;
  border-radius: 8px;
  margin: 10px;
}

#vip-page .compare-vip .item .title {
  font-size: 25px;
  font-weight: bold;
  margin: 10px 0;
}

#vip-page .compare-vip .item .price {
  margin: 15px 0;
}

#vip-page .compare-vip .item .price .value {
  font-size: 25px;
  font-weight: bold;
}

#vip-page .compare-vip .item .free-btn {
  width: 190px;
  font-size: 15px;
  line-height: 30px;
  background-color: gray;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  border: 1px solid gray;
  cursor: pointer;
}

#vip-page .compare-vip .item .free-btn:hover {
  background-color: white;
  color: gray;
}

#vip-page .compare-vip .item .pro-btn,
.plus-btn {
  width: 190px;
  font-size: 15px;
  line-height: 30px;
  background-color: black;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  border: 1px solid black;
  cursor: pointer;
}

#vip-page .compare-vip .item .pro-btn:hover,
.plus-btn:hover {
  background-color: white;
  color: black;
}

#vip-page .class-title {
  font-size: 23px;
  background-color: #e8e8ea;
  padding: 10px 20px;
  border-radius: 10px;
}

#vip-page .class-item {
  display: flex;
  display: -webkit-flex;
  line-height: 40px;
  padding: 10px;
}

#vip-page .baseline {
  border-bottom: 1px solid #d8d8d8;
}

#vip-page .class-item div {
  width: 25%;
}

#vip-page .class-item .gou {
  text-align: center;
}

#vip-page .contrast h1 {
  text-align: center;
  margin-top: 350px;
}

#vip-page .contrast p {
  font-size: 16px;
  text-align: center;
  width: 60%;
  margin: 30px auto;
  line-height: 32px;
}

#vip-page .upgrade-now-btn {
  font-size: 16px;
  line-height: 32px;
  width: 170px;
  margin: 100px auto;
  color: white;
  background-color: black;
  text-align: center;
  padding: 7px 16px;
  border-radius: 24px;
  cursor: pointer;
}

#vip-page .upgrade-now-btn:hover {
  background-color: #fff;
  color: black;
  border: 1px solid black;
}

#vip-page .upgrade-now-btn {
  font-size: 16px;
  line-height: 32px;
  width: 170px;
  margin: 100px auto;
  color: white;
  background-color: black;
  text-align: center;
  padding: 7px 16px;
  border-radius: 24px;
  cursor: pointer;
  border: 1px solid black;
}

#vip-page .upgrade-now-btn:hover {
  background-color: white;
  color: black;
}
</style>